{extend name="base/common"}

{block name="style"}
<link href="__ADMIN__/css/plugins/iCheck/custom.css" rel="stylesheet">
<!-- Sweet Alert -->
<link href="__ADMIN__/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<!-- Ladda style -->
<link href="__ADMIN__/css/plugins/ladda/ladda-themeless.min.css" rel="stylesheet">
<style>
    .shadow{width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: rgba(0,0,0,0.4);z-index: 88;}
</style>
{/block}

{block name="page-header"}
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>图片管理</h2>
        <ol class="breadcrumb">
            <li>
                图片上传
            </li>
            <li class="active">
                <strong><a href="{:Url('Uploads/index')}">列表页</a></strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">
    </div>
</div>
{/block}

{block name="main"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>图片列表</h5>
                    <div class="ibox-tools progress-demo">
                        <div class="ladda-button ladda-button-user btn btn-sm
                        btn-primary" >
                            <input type="file" name="image" id="excel" style="width:100%;height:100%;position: absolute; opacity: 0"/>
                            上传图片
                        </div>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th><input class="i-checks check-all" type="checkbox"></th>
                                <th>图片</th>
                                <th>链接</th>
                                <th>创建时间</th>
                                <th>创建者</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {volist name="list" id="vo"}
                            <tr>
                                <td><input type="checkbox" class="i-checks" name="input[]"></td>
                                <td><img src="{$vo.media_url}"/></td>
                                <td>{$vo.media_url}</td>
                                <td>{$vo.create_time|time_format='Y-m-d'}</td>
                                <td>{$vo->user->nickname}</td>
                                <td>
                                    &emsp;<a href="{:Url('Book/del?id='.$vo['id'])}" class="confirm ajax-del">删除</a>
                                </td>
                            </tr>
                            {/volist}
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="10">
                                    <div class="page">{$_page}</div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<iframe id="iframe" src="" style="height: 80%;width: 392px;z-index: 99;position: absolute;top: 10%;border: 0;left: 32%;background: #fff;display: none;" scrolling="auto" seamless></iframe>
<div class="shadow" style="display: none"></div>
{/block}

{block name="script"}
<script src="__ADMIN__/js/plugins/iCheck/icheck.min.js"></script>
<script src="__ADMIN__/js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="__ADMIN__/js/plugins/ladda/spin.min.js"></script>
<script src="__ADMIN__/js/plugins/ladda/ladda.min.js"></script>
<script src="__ADMIN__/js/plugins/ladda/ladda.jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    });
    $('#excel').change(function(){
        var l = $( '.ladda-button-user' ).ladda();
        l.ladda( 'start' );
        var formData = new FormData();
        formData.append('image', $(this)[0].files[0]);
        $.ajax({
            type: "post",
            url: "{:Url('Uploads/add')}",
            data:formData,
            processData : false,
            contentType : false,
            success: function (data) {
                console.log(data);return ;
                if(data.code == 1){
                    updateAlert(data.msg, 'success');
                }else{
                    updateAlert(data.msg, 'error');
                }
                setTimeout(function(){
                    location.reload();
                },2000);
            }
        });
    });
</script>
{/block}